DiscGolf.Views['input'] = Backbone.View.extend( {

    events: { },

    initialize: function() {

        this.render();

        if( jQuery.contains( document.documentElement, this.$el.get(0) ) ) {

            this.postDomInsertion();
        }
    },

    render: function() {

        this.innerDiv =
            this.makeEl( 'div' ).css( { 'margin' : '2em' } ).append(
                this.renderLabel(),
                this[ [ this.options.type, 'FieldRender'].join('') ](),
                this.makeEl( 'div' ).css( { 'clear': 'both' }  ) ).appendTo( this.$el );

        return this;
    },

    postDomInsertion: function() {

        this.field.height( this.label.outerHeight( true ) );

        if( this.options.hideText ) { $( this.field.children()[0] ).height( this.label.outerHeight( true ) ); }

        if( this.options.focus ) { this.field.focus(); }
       
        if( this.options.preventEnter ) { 

            this.events['keydown .preventEnter'] = 'preventEnter';
        }

        if( this.options.centerElement ) {

            this.$el.css( { 'position': 'relative' } ).height( this.innerDiv.outerHeight( true ) );
            this.innerDiv.css( { 'position': 'absolute' } );

            this.centerEl( { 'el': this.innerDiv, 'parentEl': this.$el } );
        }
        
        this.delegateEvents();
    },

    textFieldRender: function() {

        this.field = {};

        if( this.options.hideText ) {
    
            this.field = 
                this.makeEl( 'div' ).css( { 'float': 'left' } ).append(
                    this.makeEl( 'input' ).attr( { 'type': 'password', 'tabindex': this.options.tabIndex } )
                                          .css( { 'spellcheck': 'false',
                                                  'outline-width': '0',
                                                  'border': 'none',
                                                  'border-bottom': '1px solid white',
                                                  'background-color': 'black',
                                                  'margin-left': '2em',
                                                  'width': '20em',
                                                  'color': this.options.textColor } )
                );

        } else {

            this.field =
                this.makeEl( 'div' ).attr( { 'contenteditable': 'true', 'tabindex': this.options.tabIndex } )
                                    .css( {  'float': 'left',
                                             'spellcheck': 'false',
                                             'overflow': 'hidden',
                                             'white-space': 'nowrap',
                                             'outline-width': 0,
                                             'border-bottom': '1px solid white',
                                             'margin-left': '2em',
                                             'width': '20em',
                                             'text-align': ( this.options.centerText ) ? 'center': '',
                                             'font-size': ( this.options.fontSize ) ? this.options.fontSize : '1em',
                                             'color': this.options.textColor } ).addClass( ( this.options.preventEnter ) ? 'preventEnter' : '' );
        }

        return this.field;
    },

    renderLabel: function() {
        
        this.label =
            this.makeEl( 'div' ).css( { 'float': 'left',
                                        'font-size': ( this.options.fontSize ) ? this.options.fontSize : '1em',
                                        'color': this.options.textColor } ).text( this.options.text );

        return this.label;
    },

    getFieldValue: function() {

        return ( this.options.hideText )
            ? this.field.children()[0].value
            : this.field.text();
    },

    preventEnter: function( e ) {

        if( e.keyCode == 13 ) { e.preventDefault(); }
    }

} );
